<template>
  <Section padding="0 2rem 0 0rem">
    <GapedColumn gap="middle">
      <!-- Page Header -->
      <page-header title="日志拓扑分析" icon="document"> </page-header>
      <SearchComponent
        @businessChanged="handleBusinessChanged"
        @search="setSearchParam"
      >
        <template #extra>
          <GapedRow>
            <el-button type="primary" :icon="Edit" @click="handleSearch">
              查询
            </el-button>
            <el-checkbox v-model="applyWarningCondition"
              >是否应用告警条件</el-checkbox
            >
            <el-tooltip effect="dark" placement="top">
              <template #content>
                应用告警条件会动态解析时间范围内的日志数据，因此速度会比较慢，请耐心等待
              </template>
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </GapedRow>
        </template>
      </SearchComponent>
      <GapedColumn width="100%">
        <TopologyComponent
          ref="topoRef"
          mode="display"
          :node-business-data="nodeBusinessData"
          :nodeUIData="nodeUIData"
          :categories="sections"
          @nodeDblclick="showNodeDetail"
        />
      </GapedColumn>
    </GapedColumn>
    <NodeDetailDialog ref="nodeDetailDialog" />
  </Section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PageHeader from '@/components/layout/PageHeader.vue'
import { Section, GapedColumn, GapedRow } from '@/core/components'
import SearchComponent from '@/components/topo/SearchComponent.vue'
import TopologyComponent from '@/components/topo/TopologyComponent.vue'
import NodeDetailDialog from '@/components/topo/NodeDetailDialog.vue'
import { Edit, QuestionFilled } from '@element-plus/icons-vue'
import useApi from '@/core/apiStore'
import useTopoData from '@/components/topo/useTopoData'
import { setWarningNodes } from '@/components/topo/topoUtils'
import { ElMessage } from 'element-plus'
import { find } from 'lodash'

const apiStore = useApi()

const { sections, nodeBusinessData, nodeUIData, loadTopoData } = useTopoData()
const searchParams = ref({})
const setSearchParam = params => {
  searchParams.value = params
}
const searchTag = ref(null)
const nodeDetailDialog = ref(null)
const applyWarningCondition = ref(false)

// 显示节点详情
const showNodeDetail = nodeInfo => {
  console.log('nodeInfo', nodeInfo)
  const { /*id */ ip } = nodeInfo
  if (searchTag.value === null) {
    ElMessage.warning('请点击查询以进行分析')
    return
  }

  const nodeBusinessInfo = find(nodeBusinessData.value, { ip })

  console.log('detail', nodeBusinessInfo)
  const { category, label } = nodeBusinessInfo

  if (nodeDetailDialog.value) {
    nodeDetailDialog.value.show({
      ip,
      searchTag: searchTag.value,
      category,
      label,
    })
  }
}

const handleSearch = async () => {
  const {
    data: { search_tag },
  } = await apiStore.buildTopoAnalysis({
    startTime: searchParams.value.timeRange[0],
    endTime: searchParams.value.timeRange[1],
    business_name: currentBusinessName.value,
    useWarningCondition: applyWarningCondition.value,
  })

  searchTag.value = search_tag

  const {
    data: { ips: warningIps = [] },
  } = await apiStore.getWarningIps({
    search_tag,
  })

  console.log('warning-ips', warningIps)
  setWarningNodes(
    topoRef,
    warningIps,
    apiStore.apiStates.getBusinessNodes.data?.nodeBusinessData
  )
}
const topoRef = ref(null)
const currentBusinessName = ref('')

const handleBusinessChanged = async businessName => {
  currentBusinessName.value = businessName
  await loadTopoData(businessName)
}
</script>
